<html>
    <head>
        <meta name="generator" content="HTML Tidy, see www.w3.org">
        <title>Canvas Page for Sneak-O-Scope</title>
        <link rel="stylesheet" type="text/css" href= "http://yui.yahooapis.com/2.5.2/build/assets/skins/sam/skin.css">
        <link rel="stylesheet" type="text/css" href="/css/sos.css"></head>
    <body class="yui-skin-sam">
        <div class="yui-navset" id="contents" style="height : 99%; clear : both; display : none">
            <ul class="yui-nav">
                <li class="selected">
                    <a href="#summary"><em><img alt="" src="/img/dashboard.png" align= "absmiddle">Summary</em></a>
                </li>
                <li>
                    <a href="#list"><em><img alt="" src= "/img/people.png" align="absmiddle">Visitor List</em></a>
                </li>
                <li>
                    <a href="#timeline"><em><img alt="" src= "/img/graph.png" align="absmiddle">Timelines</em></a>
                </li>
                <li>
                    <a href="#maps"><em><img alt="" src= "/img/map.png" align= "absmiddle">Maps</em></a>
                </li>
            </ul>
            <div class="yui-content" style="height : 78%; width : 98%;">
                <div id="summary">
                    <div style ="height : 60%">
                        <div class="summary-item" style="width : 40%">
                            <div class="summary-title">
                                Popularity Index<img alt="" src= "/img/help.png" class="tooltip" title= "Weighted ratio of people visiting your profile to total visits recorded by Sneak-O-Scope"></div>
                            <div id="popularity" style="width : 250px;height : 145px; padding : 10px" align="center"></div>
                        </div>
                        <div class="summary-item" style="width : 55%">
                            <div class="summary-title">
                                Percentage of known visitors<img alt="" src="/img/help.png" class= "tooltip" title= "Visitors who do not have sneak-o-scope are the unknown visitors &lt;br&gt;(due to orkut privacy policy)"></div>
                            <div id="knownVisits" style="width : 30px;height : 145px; text-align : center; padding : 10px"></div>
                        </div>
                    </div>
                    <div style="clear:both; width : 100%; height : 35%; text-align : center;">
                        <center>
                            <div id = 'tagCloud' style ='width : 80%; padding : 2%; border : SOLID 1px #2647A0; background-color : White; overflow-y : auto'></div>
                        </center>
                    </div>
                </div>
                <div id="list" style ="height : 100%;">
                    <div style ="overflow-y : auto; height : 99%; float:left; width : 75%">
                        <div id="listTable" style="width : 100%"></div>
                    </div>
                    <div id = "details" style ="height : 99%; background-color :#BFDAFF; float : right;width : 23%">
                        <div style ="padding : 3%">
                            <div>
                                <div style ="text-align : center">
                                    <div style ="border : 2px #2647A0">
                                        <img id = "detail_thumbnail" src = "/img/frame.png" style ="background-repeat : no-repeat; background-position : center center; background-color : white"></div>
                                </div>
                                <br/>
                                <br/>
                                <div id = "detail_name" style="text-align : center; font-size : 1.2em"></div>
                                <div id = "detail_profile" style="text-align : center;"></div>
                                <br/>
                                <br/>
                            </div>
                            <div id = "detail_ipAddress" style ="display: none">
                                IP Address : <span id = "detail_ip"></span>
                                <br/>
                                <br/>
                                <center>
                                    <span class="yui-buttongroup">
                                        <button type= "button" name="ipInfo" id = "ipInfo" class="yui-button">
                                            <img alt="" src="/img/ipinfo.gif">
                                            <br>More Details</button>
                                    </span>
                                </center>
                            </div>
                            <iframe id = "detail_ipFrame" style ="display: none; border : SOLID 1px #2647A0; width : 100%; overflow-y : auto"></iframe>
                        </div>
                    </div>
                </div>
                <div id="timeline">
                    <div id="chartScale" class="yui-buttongroup" style="padding : 10px;float : right">
                        <span id="day" class= "yui-button yui-radio-button yui-button-checked"><span class="first-child">
                                <button type= "button" name="dayField" value="day">
                                    <img alt="" src="/img/day.png">
                                    <br>Day</button>
                            </span>
                        </span>
                        <span id= "month" class= "yui-button yui-radio-button"><span class= "first-child">
                                <button type="button" name= "monthField" value="month">
                                    <img alt="" src= "/img/month.png">
                                    <br>Month</button>
                            </span>
                        </span>
                        <span id= "year" class= "yui-button yui-radio-button"><span class= "first-child">
                                <button type="button" name= "yearField" value="year" style ="border-width : 1px">
                                    <img alt="" src= "/img/year.png">
                                    <br>Year</button>
                            </span>
                        </span>
                    </div>
                    <div style="clear : both" id="timelineGraph"></div>
                </div>
                <div id="maps"></div>
            </div>
        </div>
        <div style ="clear:both" id = "loading">
            <center>
                <img src="/img/logo.png" />
                <br/>
                <br/>
                <img src = "/img/loading-bar.gif"/>
            </center>
        </div>
        <script type="text/javascript" src="http://www.google.com/jsapi"></script>
        <script type="text/javascript" src= "http://yui.yahooapis.com/combo?2.5.2/build/utilities/utilities.js&2.5.2/build/container/container-min.js&2.5.2/build/tabview/tabview-min.js&2.5.2/build/button/button-min.js&2.5.2/build/json/json-min.js"></script>
        <div style ="display : none">
            <div id = "ownerId">{{ownerId|escape }}</div>
            <div id = "userData">{{userData|escape }}</div>
            <div id = "container">{{container|escape }}</div>
            <div id = "userTotal">{{userTotal|escape }}</div>
            <div id = "userPrefs">{{userPrefs|escape }}</div>
            <div id = "sosTotal">{{sosTotal|escape }}</div>
            <div id = "sosPrefs">{{sosPrefs|escape }}</div>
            <div id = "knownVisits">{{knownVisits|escape }}</div>
            <div id = "unknownVisits">{{unknownVisits|escape }}</div>
            <div id = "visitorList">
                <!--{% for visit in knownRecords %}-->
                <div class = "visitorRecord">
                    <span class = "viewer">{{visit.viewer|escape }}</span>
                    <span class = "enterTime">{{visit.enterTime|escape }}</span>
                    <span class = "exitTime">{{visit.exitTime|escape }}</span>
                    <span class = "cookie">{{visit.cookie|escape }}</span>
                    <span class = "ip">{{visit.ip|escape }}</span>
                    <span class = "sessionId">{{visit.sessionId|escape }}</span>
                    <span class = "param">{{visit.param|escape }}</span>
                </div>
                <!--{% endfor %}--><!--{% for visit in unknownRecords %}-->
                <div class = "visitorRecord">
                    <span class = "viewer">{{visit.viewer|escape }}</span>
                    <span class = "enterTime">{{visit.enterTime|escape }}</span>
                    <span class = "exitTime">{{visit.exitTime|escape }}</span>
                    <span class = "cookie">{{visit.cookie|escape }}</span>
                    <span class = "ip">{{visit.ip|escape }}</span>
                    <span class = "sessionId">{{visit.sessionId|escape }}</span>
                    <span class = "param">{{visit.param|escape }}</span>
                </div>
                <!--{% endfor %}-->
            </div>
        </div>
        <script type="text/javascript" src="/js/sos.js"></script>
        <script src= "http://sneakoscope.uservoice.com/pages/general/widgets/tab.js?alignment=right&amp;color=426FD9" type="text/javascript"></script>
		<script type="text/javascript">
			var gaJsHost = (("https:" == document.location.protocol) ? "https://ssl." : "http://www.");
			document.write(unescape("%3Cscript src='" + gaJsHost + "google-analytics.com/ga.js' type='text/javascript'%3E%3C/script%3E"));
		</script>
		<script type="text/javascript">
			try {
			var pageTracker = _gat._getTracker("UA-7009889-1");
			pageTracker._trackPageview();
			} catch(err) {}
		</script>
    </body>
</html>
